<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            *{
              margin: 0px;
              padding: 0px;
              list-style: none;  
            }
            .header{
                width: 100%;
                height: 66px;
                position: fixed;
                top: 0;
                background: red;
                border-bottom: 1px solid blue;
                display: flex;
                flex-wrap: nowrep;
            }
            .logo a{
                margin: -1px 15px 15px 15px;
                height: 33px;
                width: 33px;
                box-shadow: 5px 5px 5px grey;
                background: url(favicon.png);
                background-color:red;
                border-radius: 100%;
            }
            .banner{
                width: 1440px;
                height: 610px;
                margin: 10px auto;
            }

            .banner-left{
                float: left;
                width: 1082px;
                height: 610px;
                margin-right: 10px;
            }


           .banner-left p{
                left: 0px;
                bottom: 0px;
                height: 30px;
                left: 16px;
                width: 332px;
                line-height: 30px;
                color: white;
                background: red;
                position: relative;
                top: -50px;
            }
            .banner-left img{
                width: 1082px;
                height: 610px;
                border-radius: 10px;
            }

            .baner-right{
                float: right;
                width: 347px;
                height: 610px;
                
            }


            .baner-right ul{
                float: rgiht;
                width: 347px;
                height: 610px;
            }
            .baner-right li{
                width: 347px;
                height: 195px;
                margin-bottom: 10px;
            }

            .baner-right img{
                width: 347px;
                height: 195px;
                border-radius: 10px;
            }
            .baner-right p{
                position: relative;
                top: -29px;
                left: 19px;
                color: white;
            }
        </style>
    </head>
    <body>
        <div class="header">
            <h1 class="logo">
                <a href="https://www.shejipi.com/">设计癖-关注设计癖 发现好设计</a>
            </h1>
            <div class="feel">
             <a class="feel-tag" href="https://www.shejipi.com/?feel=like">赞</a>
             <a class="feel-tag" href="https://www.shejipi.com/?feel=bud">萌</a>
             <a class="feel-tag" href="https://www.shejipi.com/?feel=ha">哈</a>
             <a class="feel-tag" href="https://www.shejipi.com/?feel=cao">艹</a>
             <a class="feel-tag" href="https://www.shejipi.com/?feel=buy">买</a>
            </div>
        </div>
        div class="banner">
            <div class="banner-left">
                    <img src="./images/1.png" alt="">
                    <p>苹果又双叒叕搞事情？这次还有点意思</p>
               
            </div>
            <div class="baner-right">
                <ul>
                    <li>
                        <img src="./images/2.png" alt="">
                        <p>免费可商用素材库，设计师快来</p>
                    </li>
                    <li>
                        <img src="./images/3.png" alt="">
                        <p>华为发布全屋智能，让房子越住越增值？</p>
                    </li>
                    <li>
                        <img src="./images/4.jpg" alt="">
                        <p>是什么原因，让教科书里的小人丑得如此猖狂？</p>
                    </li>
                </ul>
            </div>
        </div>
        <div class="banner">
            <img src="images/1.png" alt="">
        </div>
        <div class="con">
            <img src="images/2.png" alt="">
        </div>
        <div class="jay">
            <img src="images/3.png" alt="">
        </div>
        <div class="right"></div>
        <div class="footer"></div>
    </body>
</html>